<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周销售趋势分析</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        header {
            text-align: center;
            padding: 30px 0;
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            border-radius: 15px;
            margin-bottom: 30px;
            color: white;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        .chart-container {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .chart-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }
        .chart-title {
            font-size: 1.5rem;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
            display: flex;
            align-items: center;
        }
        .chart-title i {
            margin-right: 10px;
            color: #3498db;
        }
        .chart {
            height: 400px;
            width: 100%;
        }
        .summary-cards {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        .card {
            flex: 1;
            min-width: 250px;
            background: white;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }
        .card.revenue {
            border-top: 4px solid #3498db;
        }
        .card.orders {
            border-top: 4px solid #e74c3c;
        }
        .card.avg {
            border-top: 4px solid #2ecc71;
        }
        .card-value {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 15px 0;
        }
        .card.revenue .card-value {
            color: #3498db;
        }
        .card.orders .card-value {
            color: #e74c3c;
        }
        .card.avg .card-value {
            color: #2ecc71;
        }
        .card-label {
            font-size: 1.1rem;
            color: #7f8c8d;
        }
        footer {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-top: 30px;
        }
        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
            }
            .chart {
                height: 350px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>周销售数据分析</h1>
            <p class="subtitle">本仪表盘展示了过去51周的销售趋势、订单数量及平均订单价值的变化情况，帮助您全面了解业务表现。</p>
        </header>
        
        <div class="summary-cards">
            <div class="card revenue">
                <h3>总销售额</h3>
                <div class="card-value">¥6,920,198</div>
                <p class="card-label">51周总收入</p>
            </div>
            <div class="card orders">
                <h3>总订单数</h3>
                <div class="card-value">14,283</div>
                <p class="card-label">51周总订单量</p>
            </div>
            <div class="card avg">
                <h3>平均订单价值</h3>
                <div class="card-value">¥22.47</div>
                <p class="card-label">所有订单平均值</p>
            </div>
        </div>
        
        <div class="dashboard">
            <div class="chart-container">
                <h2 class="chart-title"><i class="fas fa-chart-line"></i> 周销售额趋势</h2>
                <div id="revenueChart" class="chart"></div>
            </div>
            
            <div class="chart-container">
                <h2 class="chart-title"><i class="fas fa-shopping-cart"></i> 订单数量分析</h2>
                <div id="ordersChart" class="chart"></div>
            </div>
            
            <div class="chart-container">
                <h2 class="chart-title"><i class="fas fa-dollar-sign"></i> 平均订单价值</h2>
                <div id="avgValueChart" class="chart"></div>
            </div>
            
            <div class="chart-container">
                <h2 class="chart-title"><i class="fas fa-chart-bar"></i> 销售指标对比</h2>
                <div id="combinedChart" class="chart"></div>
            </div>
        </div>
        
        <footer>
            <p>数据来源：周销售趋势.json </p>
        </footer>
    </div>

    <script>
        // 模拟数据加载（实际应用中应使用fetch API）
        const salesData = [
          {"Week":1,"WeeklyRevenue":114865.27,"OrderCount":224,"AvgOrderValue":21.97},
          {"Week":2,"WeeklyRevenue":154714.94,"OrderCount":233,"AvgOrderValue":32.89},
          {"Week":3,"WeeklyRevenue":175757.98,"OrderCount":206,"AvgOrderValue":37.56},
          {"Week":4,"WeeklyRevenue":105288.77,"OrderCount":267,"AvgOrderValue":18.74},
          {"Week":5,"WeeklyRevenue":106095.23,"OrderCount":272,"AvgOrderValue":20.88},
          {"Week":6,"WeeklyRevenue":88015.42,"OrderCount":197,"AvgOrderValue":23.10},
          {"Week":7,"WeeklyRevenue":126050.40,"OrderCount":267,"AvgOrderValue":23.95},
          {"Week":8,"WeeklyRevenue":130687.36,"OrderCount":267,"AvgOrderValue":22.56},
          {"Week":9,"WeeklyRevenue":117600.82,"OrderCount":267,"AvgOrderValue":21.02},
          {"Week":10,"WeeklyRevenue":112338.00,"OrderCount":269,"AvgOrderValue":20.83},
          {"Week":11,"WeeklyRevenue":138278.82,"OrderCount":304,"AvgOrderValue":22.88},
          {"Week":12,"WeeklyRevenue":129918.43,"OrderCount":299,"AvgOrderValue":20.05},
          {"Week":13,"WeeklyRevenue":143977.03,"OrderCount":320,"AvgOrderValue":22.19},
          {"Week":14,"WeeklyRevenue":119961.92,"OrderCount":295,"AvgOrderValue":19.38},
          {"Week":15,"WeeklyRevenue":135142.20,"OrderCount":344,"AvgOrderValue":20.92},
          {"Week":16,"WeeklyRevenue":116090.02,"OrderCount":248,"AvgOrderValue":23.72},
          {"Week":17,"WeeklyRevenue":73474.56,"OrderCount":193,"AvgOrderValue":19.85},
          {"Week":18,"WeeklyRevenue":131329.18,"OrderCount":343,"AvgOrderValue":21.40},
          {"Week":19,"WeeklyRevenue":178850.25,"OrderCount":387,"AvgOrderValue":24.03},
          {"Week":20,"WeeklyRevenue":196269.92,"OrderCount":429,"AvgOrderValue":25.58},
          {"Week":21,"WeeklyRevenue":146976.90,"OrderCount":327,"AvgOrderValue":25.73},
          {"Week":22,"WeeklyRevenue":102371.90,"OrderCount":238,"AvgOrderValue":21.12},
          {"Week":23,"WeeklyRevenue":194019.08,"OrderCount":373,"AvgOrderValue":27.27},
          {"Week":24,"WeeklyRevenue":171940.30,"OrderCount":341,"AvgOrderValue":25.64},
          {"Week":25,"WeeklyRevenue":112818.82,"OrderCount":304,"AvgOrderValue":18.48},
          {"Week":26,"WeeklyRevenue":116479.92,"OrderCount":255,"AvgOrderValue":24.51},
          {"Week":27,"WeeklyRevenue":131383.74,"OrderCount":310,"AvgOrderValue":22.62},
          {"Week":28,"WeeklyRevenue":118297.88,"OrderCount":305,"AvgOrderValue":18.68},
          {"Week":29,"WeeklyRevenue":167519.81,"OrderCount":325,"AvgOrderValue":23.92},
          {"Week":30,"WeeklyRevenue":164667.90,"OrderCount":324,"AvgOrderValue":26.35},
          {"Week":31,"WeeklyRevenue":156185.19,"OrderCount":302,"AvgOrderValue":24.09},
          {"Week":32,"WeeklyRevenue":143652.21,"OrderCount":256,"AvgOrderValue":26.78},
          {"Week":33,"WeeklyRevenue":168080.69,"OrderCount":309,"AvgOrderValue":25.32},
          {"Week":34,"WeeklyRevenue":148051.26,"OrderCount":348,"AvgOrderValue":20.07},
          {"Week":35,"WeeklyRevenue":114046.78,"OrderCount":254,"AvgOrderValue":22.97},
          {"Week":36,"WeeklyRevenue":167004.06,"OrderCount":379,"AvgOrderValue":20.63},
          {"Week":37,"WeeklyRevenue":209167.98,"OrderCount":347,"AvgOrderValue":24.37},
          {"Week":38,"WeeklyRevenue":309569.21,"OrderCount":447,"AvgOrderValue":28.60},
          {"Week":39,"WeeklyRevenue":194007.85,"OrderCount":427,"AvgOrderValue":19.17},
          {"Week":40,"WeeklyRevenue":297116.86,"OrderCount":472,"AvgOrderValue":25.15},
          {"Week":41,"WeeklyRevenue":204423.28,"OrderCount":429,"AvgOrderValue":19.19},
          {"Week":42,"WeeklyRevenue":255461.64,"OrderCount":429,"AvgOrderValue":22.01},
          {"Week":43,"WeeklyRevenue":237685.49,"OrderCount":502,"AvgOrderValue":19.42},
          {"Week":44,"WeeklyRevenue":260628.77,"OrderCount":510,"AvgOrderValue":19.80},
          {"Week":45,"WeeklyRevenue":264765.98,"OrderCount":608,"AvgOrderValue":18.26},
          {"Week":46,"WeeklyRevenue":277773.94,"OrderCount":669,"AvgOrderValue":17.29},
          {"Week":47,"WeeklyRevenue":249532.68,"OrderCount":594,"AvgOrderValue":16.61},
          {"Week":48,"WeeklyRevenue":401174.55,"OrderCount":1035,"AvgOrderValue":18.73},
          {"Week":49,"WeeklyRevenue":622016.87,"OrderCount":973,"AvgOrderValue":29.89},
          {"Week":50,"WeeklyRevenue":163770.73,"OrderCount":401,"AvgOrderValue":23.20},
          {"Week":51,"WeeklyRevenue":46109.11,"OrderCount":108,"AvgOrderValue":25.93}
        ];

        // 准备数据
        const weeks = salesData.map(item => 'W' + item.Week);
        const revenues = salesData.map(item => item.WeeklyRevenue);
        const orderCounts = salesData.map(item => item.OrderCount);
        const avgValues = salesData.map(item => item.AvgOrderValue);

        // 初始化图表
        const revenueChart = echarts.init(document.getElementById('revenueChart'));
        const ordersChart = echarts.init(document.getElementById('ordersChart'));
        const avgValueChart = echarts.init(document.getElementById('avgValueChart'));
        const combinedChart = echarts.init(document.getElementById('combinedChart'));

        // 周销售额图表配置
        revenueChart.setOption({
            tooltip: {
                trigger: 'axis',
                formatter: '周 {b}<br/>¥{c}'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: weeks
            },
            yAxis: {
                type: 'value',
                name: '销售额 (¥)',
                axisLabel: {
                    formatter: '¥{value}'
                }
            },
            series: [{
                name: '周销售额',
                type: 'line',
                smooth: true,
                data: revenues,
                lineStyle: {
                    width: 4,
                    color: '#3498db'
                },
                itemStyle: {
                    color: '#3498db'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(52, 152, 219, 0.7)'
                        }, {
                            offset: 1, color: 'rgba(52, 152, 219, 0.1)'
                        }]
                    }
                },
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                }
            }]
        });

        // 订单数量图表配置
        ordersChart.setOption({
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: weeks
            },
            yAxis: {
                type: 'value',
                name: '订单数量'
            },
            series: [{
                name: '订单数量',
                type: 'bar',
                data: orderCounts,
                itemStyle: {
                    color: function(params) {
                        const colorList = orderCounts.map(count => 
                            count > 800 ? '#e74c3c' : 
                            count > 500 ? '#f39c12' : 
                            count > 300 ? '#2ecc71' : '#3498db'
                        );
                        return colorList[params.dataIndex];
                    }
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }]
        });

        // 平均订单价值图表配置
        avgValueChart.setOption({
            tooltip: {
                trigger: 'axis',
                formatter: '周 {b}<br/>¥{c}'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: weeks
            },
            yAxis: {
                type: 'value',
                name: '平均订单价值 (¥)',
                axisLabel: {
                    formatter: '¥{value}'
                }
            },
            series: [{
                name: '平均订单价值',
                type: 'line',
                data: avgValues,
                smooth: true,
                lineStyle: {
                    width: 3,
                    color: '#2ecc71'
                },
                itemStyle: {
                    color: '#2ecc71'
                },
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }]
        });

        // 组合图表配置
        combinedChart.setOption({
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['周销售额', '订单数量', '平均订单价值'],
                bottom: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: weeks
            },
            yAxis: [
                {
                    type: 'value',
                    name: '销售额 (¥)',
                    position: 'left',
                    axisLabel: {
                        formatter: '¥{value}'
                    }
                },
                {
                    type: 'value',
                    name: '订单数量',
                    position: 'right',
                    alignTicks: true
                }
            ],
            series: [
                {
                    name: '周销售额',
                    type: 'line',
                    smooth: true,
                    data: revenues,
                    lineStyle: {
                        width: 4,
                        color: '#3498db'
                    },
                    itemStyle: {
                        color: '#3498db'
                    }
                },
                {
                    name: '订单数量',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 1,
                    data: orderCounts,
                    lineStyle: {
                        width: 3,
                        color: '#e74c3c'
                    },
                    itemStyle: {
                        color: '#e74c3c'
                    }
                },
                {
                    name: '平均订单价值',
                    type: 'line',
                    smooth: true,
                    data: avgValues,
                    lineStyle: {
                        width: 3,
                        color: '#2ecc71'
                    },
                    itemStyle: {
                        color: '#2ecc71'
                    }
                }
            ]
        });

    </script>
    
    <!-- Font Awesome 图标 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
</body>
</html>